<template>
  <div id="demo">
    <Card :bordered="false">
      <i-button type="primary">公司logo</i-button>
      <Form
        ref="formValidate"
        :model="formValidate"
        label-position="right"
        :rules="ruleValidate"
        :label-width="120"
      >
        <FormItem label="公司logo：" prop="i_name">
          <div>
            <ImagePanel :single="true" v-model="formValidate.i_name">
              <img class="show" :src="formValidate.i_name" alt="公司logo" />
            </ImagePanel>
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
        </FormItem>
      </Form>
    </Card>

    
  </div>
</template>
 
 
<script>
import apis from "@/api/comment";
import ImagePanel from "@/components/ImagePanel.vue";
export default {
  components: {
    ImagePanel
  },
  data() {
    return {
      panel: false,
      url: "",
      color: "#d9d9d9",
      current: 0,
      formValidate: {
        i_name: "",
      },
      
      ruleValidate: {
        i_name: [{ required: true, message: "公司图片不能为空" }],
      },
    };
  },
  watch:{
      'formValidate.t_name'(e){
          console.log(e)
      }
  },
  mounted() {
	this.getlogo();
  },
  methods: {
    getlogo() {
      apis
        .looklogo()
        .then(response => {
          if (response.data.code == 200) {
            this.formValidate.i_name = response.data.data.i_name;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("请求失败!");
        });
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = {
            i_name: this.formValidate.i_name
          };
          apis.updatelogo(data).then(response => {
            console.log(response);
            if (response.data.code == 200) {
              this.modalAddcase = false;
              this.$Message.success("修改成功!");
              this.getlogo();
            } else {
              this.$Message.error("修改失败!");
            }
          });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  }
};
</script>
 
<style>
* {
  margin: 0;
  padding: 0;
}
.firstCard {
  margin-bottom: 30px;
}
.ivu-btn {
  margin-bottom: 10px;
}
.father {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-items: center;
  align-items: center;
}
.i {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#demo {
  width: 70%;
}
#demo .show {
  border: 1px dashed #d9d9d9;
  border-radius: 10%;
  width: 150px;
  height: 150px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  outline: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#demo .show:hover {
  border: 1px dashed #1b95e0;
}
#demo .ivu-form-item-error .show {
  border: 1px dashed red;
}
#demo .container {
  z-index: 99;
  width: 700px;
  padding-bottom: 20px;

  background-color: white;
}
#demo #image {
  max-width: 100%;
}
.container .footer {
  display: flex;
  justify-content: flex-end;
}
</style>